<template>
  <a-modal
    v-model:open="visible"
    width="1200px"
    :footer="null"
    wrap-class-name="file-detail"
    @after-open-change="afterOpenChange"
    :bodyStyle="{ height: '80vh', padding: '0' }"
  >
    <template #title>
      <div class="modal-header">
        <span>{{ file?.filename || '文件详情' }}</span>
        <a-button
          v-if="showVisualizationButton"
          type="primary"
          size="small"
          @click="handleShowVisualization"
          :loading="visualizationLoading"
          class="visualize-btn"
        >
          <EyeOutlined /> Unstructured 可视化
        </a-button>
      </div>
    </template>

    <div class="file-detail-content" v-if="file">
      <div class="file-content-section" v-if="file.lines && file.lines.length > 0">
        <MarkdownContentViewer :chunks="file.lines" />
      </div>

      <div v-else-if="loading" class="loading-container">
        <a-spin />
      </div>

      <div v-else class="empty-content">
        <p>暂无文件内容</p>
      </div>
    </div>
  </a-modal>

  <!-- Unstructured 可视化弹窗 -->
  <UnstructuredVisualizerModal
    v-model:visible="visualizerModalVisible"
    :pre-loaded-data="visualizationData"
  />
</template>

<script setup>
import { computed, ref } from 'vue';
import { message } from 'ant-design-vue';
import { EyeOutlined } from '@ant-design/icons-vue';
import { useDatabaseStore } from '@/stores/database';
import { agentApi } from '@/apis/agent_api';
import MarkdownContentViewer from './MarkdownContentViewer.vue';
import UnstructuredVisualizerModal from './UnstructuredVisualizerModal.vue';
import { getStatusText, formatStandardTime } from '@/utils/file_utils';

const store = useDatabaseStore();

const visible = computed({
  get: () => store.state.fileDetailModalVisible,
  set: (value) => store.state.fileDetailModalVisible = value
});

const file = computed(() => store.selectedFile);
const loading = computed(() => store.state.fileDetailLoading);

// 可视化相关
const visualizerModalVisible = ref(false);
const visualizationData = ref(null);
const visualizationLoading = ref(false);

// 判断是否显示可视化按钮
const showVisualizationButton = computed(() => {
  if (!file.value || !file.value.filename) return false;
  // 只对 PDF 文件显示可视化按钮
  return file.value.filename.toLowerCase().endsWith('.pdf');
});

const afterOpenChange = (open) => {
  if (!open) {
    store.selectedFile = null;
    visualizationData.value = null;
  }
};

// 处理可视化
const handleShowVisualization = async () => {
  // 从 path 字段获取文件路径
  const filePath = file.value?.path;
  
  if (!filePath) {
    console.error('文件对象：', file.value);
    message.error('无法获取文件路径，请联系管理员');
    return;
  }

  visualizationLoading.value = true;
  
  try {
    message.info('正在加载可视化数据，这可能需要一些时间...');
    
    // 通过文件路径获取可视化数据
    const result = await agentApi.visualizeUnstructuredByPath(filePath);
    
    // 设置数据并打开可视化弹窗
    visualizationData.value = result;
    visualizerModalVisible.value = true;
    
    message.success('可视化数据加载成功');
    
  } catch (error) {
    console.error('加载可视化数据失败:', error);
    message.error('加载可视化数据失败: ' + error.message);
  } finally {
    visualizationLoading.value = false;
  }
};
</script>

<style scoped>
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

.modal-header span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visualize-btn {
  flex-shrink: 0;
  margin-right: 24px;
}

.file-detail-content {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.file-content-section h4 {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.empty-content {
  text-align: center;
  padding: 40px 0;
  color: #999;
}
</style>

<style lang="less">
.file-detail {
  .ant-modal {
    top: 20px;
  }
}
</style>